<template>
  <div class="container" >
    <!-- <mt-swipe :auto="0" >

      <mt-swipe-item  v-for="item in list">
        <img v-bind:src="item.img" alt="" @load="resize()" ref='img'>
      </mt-swipe-item>
      
    </mt-swipe> -->
    <slider :imgs="list"></slider> 
    <div class="mui-slider-item">
      <ul class="mui-table-view mui-grid-view mui-grid-9">
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/news/newslist">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/photo/photolist">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">图片分享</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/goods/goodlist">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">商品购买</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="#">
            <span class="mui-icon mui-icon-gear"></span>
            <div class="mui-media-body">留言反馈</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="#">
            <span class="mui-icon mui-icon-info"></span>
            <div class="mui-media-body">视频专区</div>
          </router-link>
        </li>
        <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="#">
            <span class="mui-icon mui-icon-more"></span>
            <div class="mui-media-body">联系我们</div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// var bc;
import { Toast } from 'mint-ui';
import common from '../kits/common.js'
import slider from './subcom/slider.vue';
export default {
  components: {
    slider
  },
  created(){
    this.getdata();
  },
  data () {
    return {
      list: []
    }
  },
  methods: {
    getdata:function(){
      var url = common.apidomain + '/api/getlunbo'
      this.$http.get(url).then(function(res){
        if(res.body.status != 0){
          Toast(res.body.message);
          return;
        }
        this.list = res.body.message;
      })
    },
    // resize(){
    //   var nw = this.$refs.img[0].naturalWidth,
    //       nh = this.$refs.img[0].naturalHeight;
    //       bc = nw / nh
    //   var h = document.body.offsetWidth / bc;
    //   document.querySelector('.mint-swipe').style.height = h + 'px';
    // }
  }
}
// window.onresize = function(){
//   document.querySelector('.mint-swipe').style.height = document.body.offsetWidth / bc + 'px';
// };

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  /* .mint-swipe{
    width: 100%;
    height: 200px;
    background-color: red;
  }
  .mint-swipe img{
    width: 100%;
    height: 100%;
  } */
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    background-color: #fff;
    border: 0px;
  }
  .mui-table-view-cell a span::before {
    content: '';
    width: 50px;
    height: 50px;
    display: inline-block;
    background-repeat: round;
  }
  .mui-icon-location:before {
    background-image: url('../../static/mui/imgs/1.png')
  }
  .mui-icon-search:before {
    background-image: url('../../static/mui/imgs/2.png')
  }
  .mui-icon-phone:before {
    background-image: url('../../static/mui/imgs/3.png')
  }
  .mui-icon-gear:before {
    background-image: url('../../static/mui/imgs/4.png')
  }
  .mui-icon-info:before {
    background-image: url('../../static/mui/imgs/5.png')
  }
  .mui-icon-more:before {
    background-image: url('../../static/mui/imgs/6.png')
  };
  
</style>
